<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>跑步</title>
	<!--  地图的js加载 -->
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "3c5816c5da8f572b8dcc027044cb7eff",
		}
	</script>
	<script src="https://webapi.amap.com/loader.js"></script>
	<script type="text/javascript">
		AMapLoader.load({
			key: "12eebd2dfa4d74ca006c59b54f80defa",       // 申请好的Web端开发者Key，首次调用 load 时必填
			version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		}).then((AMap) => {
			const map = new AMap.Map('container', {
				zoom: 11,//级别
				center: [104.066301, 30.572961],//中心点坐标
			});
		}).catch((e) => {
			console.error(e);  //加载错误提示
		});   
	</script>
</head>

<body>
	<!-- 顶部导航 -->
	<nav class="navbar">

	</nav>
	<main>
		<!-- 目前积累跑步距离： -->
		<div id="distance">
			<p>目前积累跑步距离：</p>
			<p><span class="total">999.99</span>公里</p>
		</div>
		<!-- 地图 -->
		<div id="container">
			<div id="map">
				<div class="run">
					<span class="active">户外跑</span>
					<span>燃脂跑</span>
					<span>跑步机</span>
				</div>
				<div class="go">GO</div>
			</div>
		</div>
		<div class="path">
			<p>跑步路线</p>
			<p>使用跑步路线，邂逅附近的同行者</p>
		</div>

	</main>
	<!-- 底部导航栏 -->
	<nav class="tabbar">
	</nav>
	<!-- 蒙层框 -->
	<div class="mask">
		<p class="num">3</p>
	</div>
</body>

</html>